<template>
	<div class="customer-service">
		<div class="customer-box">
			<el-row>
				<el-col :span="6">
					<div class="client-box">
						<div class="client-top">
							近期信息
						</div>
						<div class="client-list">
							<div class="client-item" v-for="(i,index) in contactPerson" :key="index">
								<div class="head-sculpture">
									<img src="../../assets/images/head01.jpeg" alt="head sculpture">
								</div>
								<div class="contact-person">
									<div class="contact-person-top">
										<div class="contact-person-name">
											{{i.name}}
										</div>
										<div class="contact-time">
											{{i.time.slice(11,16)}}
										</div>
									</div>
									<div class="contact-person-msg">
										{{i.recentMessage}}
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="18">
					<div class="message-box">
						<div class="message-top">
							在线客服
						</div>
						<div class="message-content">
							<div class="chat-records-list" ref="chatRecordsList" @scroll="chatRecordsListScroll">
								<div class="load-box" ref="loading">
									<loading class="loadings"></loading>
								</div>
								<div class="column-reverse">
									<div v-for="(i,index) in chatRecords" :key="index" v-if="index<10*pageCount"
										:class="['chat-records-item',i.identity==1?'right-item':'']">
										<div class="head-sculpture">
											<img :src="i.identity==0?require('../../assets/images/head01.jpeg'):require('../../assets/images/head02.webp')"
												alt="head sculpture">
										</div>
										<div :class="i.identity==0?'frame-left':'frame-right'">
											<div :class="i.identity==0?'triangle-left':'triangle-right'"></div>
											<div :class="i.identity==0?'rotationtiao-left':'rotationtiao-right'">
												{{i.ChatContent}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="message-input">
							<div class="input-box">
								<textarea autofocus="true" rows="8" placeholder="在线客服" v-model="messages"></textarea>
							</div>
							<div class="input-btn">
								<div class="send" @click="handleSend" ref="send">
									发送
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import loading from "@/components/loading/Loading";
	export default {
		name: "customerService",
		components: {
			loading
		},
		data() {
			return {
				pageCount: 1,
				messages: '',
				chatRecords: [{
					name: "在线客服",
					ChatContent: "您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！您好！有什么可以帮到您！",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "你好",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "我",
					ChatContent: "你们的产品什么情况",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "您具体是的是那款产品",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "稍等",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "好的，慢慢来，不着急",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "ok",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "我",
					ChatContent: "我想了解的产品是你们公司的发电机",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "是的，我们公司主要生产发电机，您需要了解那款发电机",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "你可以对给我介绍一遍吗，做个对比",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "没问题",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "谢谢",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "我",
					ChatContent: "开始吧",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "我们公司的发电机款式多",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "在线客服",
					ChatContent: "质量好",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "在线客服",
					ChatContent: "发电量大，稳定，价格合理，性价比高",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "在线客服",
					ChatContent: "首页介绍的是我们的热销产品...",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "在线客服",
					ChatContent: "就这些了，希望可以帮到您",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "好的，我了解了",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "我",
					ChatContent: "谢谢",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "您还有什么问题都可以咨询我",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "明白，",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "我",
					ChatContent: "还有就是这个价格还可以商量商量",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "我",
					ChatContent: "具体可以跟你沟通吗",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "这个是可以的，你有什么需求都可以提",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "好，我们需要购买的量很大，你们可以给多大的优惠",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "购买越多，优惠价格越大",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "我需要购买50台",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "我",
					ChatContent: "如果是这么多呢",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}, {
					name: "在线客服",
					ChatContent: "可以享受8折",
					time: "2023-08-18 21:20:06",
					identity: '0'
				}, {
					name: "我",
					ChatContent: "好的，清楚了",
					time: "2023-08-18 21:20:06",
					identity: '1'
				}],
				contactPerson: [{
						name: "名字很长客户名字很长客户名字很长客户名字很长客户名字很长客户",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
					{
						name: "客户一",
						time: '2023-08-18 21:20:06',
						recentMessage: '你好！'
					},
				]
			};
		},
		methods: {
			initiate() {
				this.$nextTick(() => {
					this.$refs.chatRecordsList.scrollTo({
						top: this.$refs.chatRecordsList.scrollHeight,
						// behavior: 'smooth'
					});
				});
				// 颠倒聊天数组
				this.chatRecords = this.chatRecords.reverse()
			},
			scrolling() {

			},
			handleSend() {
				this.chatRecords.push({
					name: "我",
					ChatContent: this.messages,
					time: "2023-08-18 21:20:06",
					identity: '1'
				})
				this.messages = ''
				this.$nextTick(() => {
					this.$refs.chatRecordsList.scrollTo({
						top: this.$refs.chatRecordsList.scrollHeight,
						behavior: 'smooth'
					});
				});
			},
			chatRecordsListScroll(event) {
				console.log("滚动位置：", event.target.scrollTop);
				if (event.target.scrollTop == 0 && this.pageCount * 10 < this.chatRecords.length) {
					this.$refs.loading.style.animation = "showBtn 0.3s ease forwards"
					var heightDifference = this.$refs.chatRecordsList.scrollHeight
					setTimeout(() => {
						this.pageCount = this.pageCount + 1
						this.$nextTick(() => {
							this.$refs.chatRecordsList.scrollTo({
								top: this.$refs.chatRecordsList.scrollHeight - heightDifference,
								// behavior: 'smooth'
							});
						});
					}, 500)
				} else {
					this.$refs.loading.style.animation = "hiddenBtn 0.3s ease forwards"
				}
			},

		},
		mounted() {
			this.initiate()
			window.addEventListener("scroll", this.scrolling);
		},
		watch: {
			"messages"(newVal, oldVal) {
				if (this.messages == '') {
					this.$refs.send.style.animation = "hiddenBtn 0.3s ease forwards"
				} else {
					this.$refs.send.style.animation = "showBtn 0.3s ease forwards"
				}
			}
		}

	}
</script>

<style scoped>
	.customer-service {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("../../static/img/homeB.jpg") no-repeat;
	}

	.customer-box {
		width: 900px;
		height: 550px;
		background-color: #fff;
		border: solid 1px rgba(0, 0, 0, 0.1);
		margin: 80px 0 40px 0;
		border-radius: 8px;
		overflow: hidden;
	}

	.client-box {
		width: 100%;
		height: 550px;
		border-right: solid 1px rgba(0, 0, 0, 0.1);
	}

	.client-top {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		text-indent: 20px;
		font-size: 12px;
		color: rgba(0, 0, 0, 0.6);
		border-bottom: solid 1px rgba(0, 0, 0, 0.1);
	}

	/* 联系人列表 */
	.client-list {
		overflow-y: auto;
		height: 500px;
		/* background-color: #bdd1bd; */
		margin: 5px 0;

		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 1.0);
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 6px;
			border-left: solid 3px #fff;
			border-right: solid 3px #fff;
			background: rgba(162, 162, 162, 0);
		}
	}

	.client-list:hover {

		&::-webkit-scrollbar-thumb {
			background: rgba(162, 162, 162, 0.4);
		}
	}

	.client-item {
		display: flex;
		padding: 5px;
	}

	.client-item:hover {
		background-color: #ebebeb;
	}

	.contact-person {
		width: 150px;
		margin-left: 10px;
	}

	.contact-person-top {
		display: flex;
		justify-content: space-between;
	}

	.contact-person-name {
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		white-space: nowrap;
		margin-right: 8px;
		font-size: 13px;
	}

	.contact-time {
		color: #969696;
		font-size: 1px;
	}

	.contact-person-msg {
		width: 110px;
		color: #969696;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 1px;
	}

	/* 聊天信息 */
	.message-box {
		width: 100%;
		height: 550px;
	}

	.message-top {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		border-bottom: solid 1px rgba(0, 0, 0, 0.1);
	}

	.message-content {
		width: 100%;
		height: 380px;
		background-color: #f0f0f0;
		border-left: solid 1px rgba(0, 0, 0, 0.1);
	}

	.chat-records-list {
		padding: 20px 20px 0 20px;
		height: 360px;
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 8px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(255, 255, 255, 1.0);
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 6px;
			border-left: solid 3px #fff;
			border-right: solid 3px #fff;
			background: rgba(162, 162, 162, 0);
		}
	}

	.column-reverse {
		display: flex;
		flex-direction: column-reverse;
	}

	.chat-records-list:hover {
		&::-webkit-scrollbar-thumb {
			background: rgba(162, 162, 162, 0.4);
		}
	}

	.chat-records-item {
		margin-bottom: 20px;
		/* background-color: #2797ff; */
		display: flex;
	}

	.right-item {
		flex-direction: row-reverse;
	}

	.head-sculpture {
		width: 35px;
		height: 35px;
	}

	.head-sculpture img {
		width: 35px;
		height: 35px;
		border-radius: 2px;
	}

	.frame-left {
		width: 525px;
		margin-left: 15px;
		position: relative;
		display: flex;
	}

	.triangle-left {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-right: 5px solid #fff;
		position: absolute;
		left: -5px;
		top: 12px;
	}

	.rotationtiao-left {
		font-size: 14px;
		background-color: #fff;
		border-radius: 2px;
		padding: 5px 10px;
		text-align: justify;
		word-break: break-all;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.frame-right {
		width: 525px;
		margin-right: 15px;
		position: relative;
		display: flex;

		flex-direction: row-reverse;
	}

	.triangle-right {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 5px solid #98E165;
		position: absolute;
		right: -5px;
		top: 12px;
	}

	.rotationtiao-right {
		font-size: 14px;
		background-color: #98E165;
		border-radius: 2px;
		padding: 5px 10px;
		text-align: justify;
		word-break: break-all;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.the-left {
		display: flex;
		flex-direction: row;
	}

	.the-right {
		display: flex;
		flex-direction: row-reverse;
	}

	/*  */

	.message-input {
		width: 100%;
		height: 130px;
		border-top: solid 1px rgba(0, 0, 0, 0.1);

	}

	.input-box {
		display: flex;
	}

	.input-box textarea {
		width: 100%;
		height: 70px;
		margin: 10px 20px;
		border: none;
		outline: 0;
		resize: none;
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 12px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0);
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 6px;
			border-left: solid 3px #fff;
			border-right: solid 3px #fff;
			background: rgba(162, 162, 162, 0.8);
		}
	}

	.input-btn {
		display: flex;
		flex-direction: row-reverse;
	}

	.send {
		width: 100px;
		height: 30px;
		background-color: #2797ff;
		color: #fff;
		margin-right: 20px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: 0.4s;
		opacity: 0;
		visibility: hidden;
	}

	.send:hover {
		background-color: #207ed1;
		cursor: pointer;
	}

	@keyframes rotate {
		0% {
			-webkit-transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	.load-box {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
		opacity: 0;
		visibility: hidden;
	}

	.loadings {
		-ms-transform: scale(0.5);
		/* IE 9 */
		transform: scale(0.5);
		/* 标准语法 */
	}
</style>
